<!DOCTYPE html>
<html lang="zh-cmn-Hans">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
		<script type="text/javascript" src="Plug/jquery-1.11.3.min.js"></script>
		<title>约拍美图</title>
		<script src="Plug/layer-v3.1.1/layer.js" type="text/javascript" charset="utf-8"></script>
		<!--layer  弹框插件-->
		<link rel="stylesheet" href="static/css/base/reset.css" />
		<!--jqyery-weiui插件 -->
		<link rel="stylesheet" href="Plug/jquery-weui/jquery-weui.min.css">
		<link rel="stylesheet" href="Plug/jquery-weui/weui.min.css">
		<script src="Plug/jquery-weui/js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="Plug/jquery-weui/js/city-picker.js" type="text/javascript" charset="utf-8"></script>
		<!--轮播插件-->
		<link rel="stylesheet" type="text/css" href="Plug/swiper/swiper.min.css" />
		<script src="Plug/swiper/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<!--重置样式-->
		<link rel="stylesheet" href="static/css/base/main.css" />
		<!--公共样式-->
		<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_990287_nfz8gvyr0f9.css" />
		<!--阿里云图标库-->
		<script src="static/js/base.js" type="text/javascript" charset="utf-8"></script>
		<!---------------公共导入分割线------------------------>
		<link rel="stylesheet" href="static/css/login/index.css" />
		<link rel="stylesheet" href="static/css/index_into/index_into.css" />
		<!--本页样式-->
	</head>

	<body>
		<!--存在bar加此wrap-->
		<div class="have_bar_wrap">
			<div class="banner_wrap meitu_intobanner">
				<div class="swiper-container banner_tab into_meitutab">
					<div class="swiper-wrapper">
						<a class="swiper-slide" href="login.html"><img src="static/images/index_banner.jpg" /></a>
						<a class="swiper-slide" href="password.html"><img src="static/images/index_banner.jpg" /></a>
						<a class="swiper-slide" href="javascript:void(0)"><img src="static/images/index_banner.jpg" /></a>
					</div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination banner_tab_pagination"></div>
			</div>
			<div class="model_recommend_tit flex_ca">
				<a href="javascript:void(0)"><span>区域</span><i class="iconfont icon-xuanzeqizhankai"></i><input id="quyu" type="" name="" value="" readonly=""></a>
				<a id="redu" href="javascript:void(0)"><span>热度</span><i class="iconfont icon-paixu-xiuyo"></i></a>
				<a class="shaixuan_btn open-popup" data-target="#shaixuan" href="javascript:void(0)"><i class="iconfont icon-shaixuan"></i>筛选</a>
			</div>
			<div class="ypmt_wrap">
				<div class="yp_info">
					<div class="main_box">
						<div class="yp_info_tit flex_tb">
							<a class="a_link" href="details_meitu.html">
								<img class="yp_info_tit_head" src="static/images/changkuan21.png">
							</a>
							<div class="yp_info_tit_mid">
								<div class="yp_info_tit_mid_top flex_cl">
									<span>王木林森</span>
									<i class="iconfont icon-woman"></i>
									<b class="real_name_icon">已实名</b>
									<b class="guarantee_icon">信用担保</b>
								</div>
								<div class="yp_info_tit_mid_bottom">
									<span>摄影师</span>
								</div>
							</div>
							<div class="yp_info_tit_r flex_cc">
								<i class="iconfont icon-weizhi1"></i>
								<span>成都</span>
							</div>
						</div>
						<div class="yp_info_content">
							在澳元拍摄荷花的小姐姐
						</div>
						<div class="photo_wrap">
							<div class="swiper-container yp_swiper swiper-container-initialized swiper-container-horizontal swiper-container-ios">
								<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
									<a class="swiper-slide swiper-slide-active" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
									<a class="swiper-slide swiper-slide-next" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
									<a class="swiper-slide" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
									<a class="swiper-slide" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
									<a class="swiper-slide" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
									<a class="swiper-slide" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
									<a class="swiper-slide" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
								</div>
								<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
						</div>
						<div class="yp_reader">
							<span>一小时前</span>
							<span>阅读&nbsp;429</span>
						</div>
						<div class="model_tips">
							<span>性感</span>
							<span>内衣</span>
							<span>成熟</span>
						</div>
					</div>
				</div>
				<div class="yp_info">
					<div class="main_box">
						<div class="yp_info_tit flex_tb">
							<a class="a_link" href="details_meitu.html">
								<img class="yp_info_tit_head" src="static/images/changkuan21.png">
							</a>
							<div class="yp_info_tit_mid">
								<div class="yp_info_tit_mid_top flex_cl">
									<span>王木林森</span>
									<i class="iconfont icon-woman"></i>
									<b class="real_name_icon">已实名</b>
									<b class="guarantee_icon">信用担保</b>
								</div>
								<div class="yp_info_tit_mid_bottom">
									<span>摄影师</span>
								</div>
							</div>
							<div class="yp_info_tit_r flex_cc">
								<i class="iconfont icon-weizhi1"></i>
								<span>成都</span>
							</div>
						</div>
						<div class="yp_info_content">
							在澳元拍摄荷花的小姐姐
						</div>
						<div class="photo_wrap">
							<div class="swiper-container yp_swiper swiper-container-initialized swiper-container-horizontal swiper-container-ios">
								<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
									<a class="swiper-slide swiper-slide-active" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
									<a class="swiper-slide swiper-slide-next" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
									<a class="swiper-slide" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
									<a class="swiper-slide" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
									<a class="swiper-slide" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
									<a class="swiper-slide" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
									<a class="swiper-slide" href="javascript:void(0)" style="margin-right: 10px;"><img src="static/images/changkuan11.png"></a>
								</div>
								<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
						</div>
						<div class="yp_reader">
							<span>一小时前</span>
							<span>阅读&nbsp;429</span>
						</div>
						<div class="model_tips">
							<span>性感</span>
							<span>内衣</span>
							<span>成熟</span>
						</div>
					</div>
				</div>
			</div>

			<div id="shaixuan" class="weui-popup__container shaixuan">
				<div class="weui-popup__overlay"></div>
				<div class="weui-popup__modal">
					<ul class="shaixuan_list">
						<li>
							<div class="shaixuan_tit">
								<span>风格</span>
							</div>
							<div class="shaixuan_btn">
								<a href="javascript:void(0)">时尚</a>
								<a href="javascript:void(0)">性感</a>
								<a href="javascript:void(0)">暗黑</a>
								<a href="javascript:void(0)">情绪</a>
								<a href="javascript:void(0)">胶片</a>
								<a href="javascript:void(0)">校园</a>
								<a href="javascript:void(0)">纪实</a>
								<a href="javascript:void(0)">妆面</a>
								<a href="javascript:void(0)">日系</a>
								<a href="javascript:void(0)">复古</a>
								<a href="javascript:void(0)">COS</a>
								<a href="javascript:void(0)">少女</a>
								<a href="javascript:void(0)">青春</a>
								<a href="javascript:void(0)">糖水</a>
								<a href="javascript:void(0)">情侣</a>
								<a href="javascript:void(0)">爱情</a>
								<a href="javascript:void(0)">封面</a>
								<a href="javascript:void(0)">夜景</a>
								<a href="javascript:void(0)">欧美</a>
								<a href="javascript:void(0)">古风</a>
								<a href="javascript:void(0)">清新</a>
								<a href="javascript:void(0)">淘宝</a>
								<a href="javascript:void(0)">森系</a>
								<a href="javascript:void(0)">视觉</a>
								<a href="javascript:void(0)">非主流</a>
								<a href="javascript:void(0)">哥特</a>
							</div>
						</li>
					</ul>
				</div>
				<div class="popup_btn flex_cc">
					<a onclick="reset_saixuan()" class="reset_saixuan" href="javascript:void(0)">重置</a>
					<a class="saixuan_ok close-popup" href="javascript:void(0)">确定</a>
				</div>
			</div>
			<!--底部切换bar-->
			<div class="footer_bar">
				<a class="bar_index footer_bar_action" href="javascript:void(0)"><i></i>首页</a>
				<a class="bar_screen" href="javascript:void(0)"><i></i>筛选</a>
				<a href="javascript:void(0)">
					<div class="bar_fabu_in"><i class="iconfont icon-jiahao"></i></div>
				</a>
				<a class="bar_msg" href="javascript:void(0)"><i></i>消息</a>
				<a class="bar_my" href="my.html"><i></i>我的</a>
			</div>
		</div>
		<script type="text/javascript">
			$(function() {
				var mySwiper = new Swiper('.banner_tab', {
				loop: true, // 循环模式选项
				speed: 1000,
				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
					clickable: true
				},
				autoplay: {
					delay: 3000,
					disableOnInteraction: false,
				},
			})
				var yuepailist = new Swiper('.yp_swiper', {
					slidesPerView: 'auto',
					spaceBetween: 10,
					speed: 300,
				})
				$("#quyu").cityPicker({
					title: "请选择地区域",
					showDistrict: false,
					onClose: function(d) {
						console.log(this, d)
						city = (this, d.displayValue);
						alert(JSON.stringify(city))
						$("#quyu").siblings("span").text(city[0] + " " + city[1])
					}
				});
				/*筛选限制*/
				$(document).on("click", ".shaixuan_btn a", function() {
					if($(this).hasClass("shaixuan_action")) {
						$(this).removeClass("shaixuan_action");
					} else {
						$(this).addClass("shaixuan_action");
						var tipnum = $(this).parent().find(".shaixuan_action").length;
						if(tipnum > 5) {
							Msg("最多只能选择5个同类型");
							$(this).removeClass("shaixuan_action");
							return false;
						}
					}
				})
				/*筛选限制*/
				$(document).on("click", "#redu", function() {
					if($(this).hasClass("reduaction")) {
						$(this).removeClass("reduaction");
					} else {
						$(this).addClass("reduaction");
					}
				})
			})
			/*重置筛选*/
			function reset_saixuan() {
				$(".shaixuan_btn a").removeClass("shaixuan_action")
			}
		</script>
	</body>

</html>